<template>
  <div>
    <el-button plain icon="el-icon-plus" @click="add"
      >新增</el-button
    >

    <el-input style="width: 50%;"  placeholder="请输入项目名称" v-model="pageVo.name">
      <el-select style="width: 150px;" v-model="pageVo.sex" slot="prepend" placeholder="适用性别">
        <el-option label="适用性别" :value="null"></el-option>
        <el-option label="男" :value="1"></el-option>
        <el-option label="不限" :value="2"></el-option>
        <el-option label="女" :value="0"></el-option>
      </el-select>
      <el-button
        slot="append"
        type="primary"
        icon="el-icon-search"
        @click="info"
        >查询</el-button
      >
    </el-input>
    <div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="项目编码" prop="code" width="180">
        </el-table-column>
        <el-table-column label="项目名称" prop="name"> </el-table-column>
        <el-table-column prop="type" label="项目类型">
          <template slot-scope="scope">
            {{
              scope.row.type == 1 ? "检查" : scope.row.type == 2 ? "检验" : ""
            }}
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="适用性别">
          <template slot-scope="scope">
            {{ scope.row.sex == 1 ? "男" : scope.row.sex == 2 ? "不限" : "女" }}
          </template>
        </el-table-column>
        <el-table-column label="价格" prop="price"> </el-table-column>
        <el-table-column label="项目说明" prop="remark"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              plain
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              plain
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageVo.page"
        :page-sizes="[10, 20, 50]"
        :page-size="pageVo.num"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageVo.total"
      >
      </el-pagination>

      <el-dialog
      title="删除检查项"
      style="border-radius: 100px"
      :visible.sync="delvisible"
      width="25%"
    >
      <span
        ><h4>确认删除嘛？</h4></span
      >
      <span slot="footer" class="dialog-footer">
        <el-button @click="delvisible = false">取消</el-button>
        <el-button type="primary" @click="delcheckitem">确定</el-button>
      </span>
    </el-dialog>

    </div>

    <el-dialog
      class="dialog"
      title="新增检查项"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="checkitem" :rules="rules" ref="checkitem">
        <el-row>
      <el-col :span="12">
        <el-form-item label="编号" prop="code">
          <el-input  class="inputForm" type="number" v-model="checkitem.code"></el-input>
        </el-form-item>
      </el-col>

<el-col :span="12">
        <el-form-item label="项目名称" prop="name">
          <el-input  class="inputForm" v-model="checkitem.name"></el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="助记名" prop="mnemonicName">
          <el-input class="inputForm" v-model="checkitem.mnemonicName"></el-input>
        </el-form-item>
      </el-col>

<el-col :span="12">
        <el-form-item label="适用性别" prop="sex">
          <el-select   v-model="checkitem.sex" placeholder="适用性别">
            <el-option label="男" value="1"></el-option>
            <el-option label="不限" value="2"></el-option>
            <el-option label="女" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="所属分类" prop="affiliationClassify">
          <el-input class="inputForm" v-model="checkitem.affiliationClassify"></el-input>
        </el-form-item>
      </el-col>

<el-col :span="12">
        <el-form-item label="项目类型" prop="type">
          <el-select   v-model="checkitem.type" placeholder="项目类型">
            <el-option label="检查" value="1"></el-option>
            <el-option label="检验" value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <el-form-item label="价格" prop="price">
          <el-input class="inputForm" type="number" v-model="checkitem.price"> </el-input>
        </el-form-item>
      </el-col>

<el-col :span="12">

        <el-form-item label="成本价" prop="cheprice">
          <el-input class="inputForm" type="number" v-model="checkitem.cheprice"> </el-input>
        </el-form-item>
      </el-col>
    </el-row>
        <el-form-item label="项目说明" prop="remark">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 8 }"
            v-model="checkitem.remark"
          >
          </el-input>
        </el-form-item>
  

        <el-form-item label="注意事项" prop="attention">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 8 }"
            v-model="checkitem.attention"
          >
          </el-input>
        </el-form-item>
        <el-form-item class="left-align">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" v-show="Upfalse" @click="UpCheckItem('checkitem')">确 定</el-button>
          <el-button type="primary" v-show="Addfalse" @click="AddCheckItem('checkitem')">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    info() {
      const loading = this.$loading({
        lock: true,
        text: "正在显示中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios.post("/rear/LYN/checkItemInfo", this.pageVo).then((req) => {
        loading.close();
        this.tableData = req.data.list;
        this.pageVo.total = req.data.total;
      });
    },
    add(){
      this.Upfalse=false;
      this.Addfalse=true;
      this.dialogFormVisible = true;
      this.checkitem=
        {
        id:null,
        code: "",
        name: "",
        mnemonicName: '',
        sex: '1',
        affiliationclassify: '',
        type: '1',
        price: '',
        cheprice: '',
        remark: '',
        attention: '',
      }
    },
    handleDelete(index, row) {
      this.delvisible = true;
      this.checkitem.id = row.id;
    },
    handleEdit(index, row) {
      this.Addfalse=false;
      this.Upfalse=true;
      this.dialogFormVisible = true;
      this.checkitem = Object.assign({},row);
    },
    handleSizeChange(val) {
      this.pageVo.num = val;
      this.info();
    },
    handleCurrentChange(val) {
      this.pageVo.page = val;
      this.info();
    },
    AddCheckItem(formName) {
      if (parseFloat(this.checkitem.cheprice) > parseFloat(this.checkitem.price)) {
        alert("成本价不能大于价格");
        return;
      } 

      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
        lock: true,
        text: "正在新增中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios.post("/rear/LYN/addCheckItem", this.checkitem).then((req) => {
        loading.close();
        if (req.data > 0) {
          this.info();
          this.dialogFormVisible = false;
          this.$message({
            message: "新增成功",
            type: "success",
          });
        }
      });
        } else {
          this.$message({
            message: "信息未输入完成",
            type: "error",
          });
          return false;
        }
      });
    },
    delcheckitem(){
      const loading = this.$loading({
        lock: true,
        text: "正在删除中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios
        .get("/rear/LYN/delCheckItem", {params:{id:this.checkitem.id}})
        .then((req) => {
          if (req.data > 0) {
            loading.close();
            this.delvisible = false;
            this.info();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          } else {
            loading.close();
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    UpCheckItem(formName){
      if (parseFloat(this.checkitem.cheprice) > parseFloat(this.checkitem.price)) {
        alert("成本价不能大于价格");
        return;
      } 
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
        lock: true,
        text: "正在修改中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.2)",
      });
      this.axios.post("/rear/LYN/UpCheckItem", this.checkitem).then((req) => {
        loading.close();
        if (req.data > 0) {
          this.info();
          this.dialogFormVisible = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
        }
      });
        } else {
          this.$message({
            message: "信息未输入完成",
            type: "error",
          });
          return false;
        }
      });
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      delvisible:false,
      tableData: [],
      Upfalse:false,
      Addfalse:false,
      pageVo: { name: null, page: 1, num: 10, sex: null, total: null },
      checkitem: {
        id:null,
        code: "",
        name: "",
        mnemonicName: '',
        sex: '1',
        affiliationclassify: '',
        type: '1',
        price: '',
        cheprice: '',
        remark: '',
        attention: '',
      },
      rules: {
        code: [{ required: true, message: "请输入检查项编码", trigger: "blur" }],
        name: [{ required: true, message: "请输入检查项名称", trigger: "blur" }],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
         cheprice: [{ required: true, message: "请输入成本价", trigger: "blur" }],
         remark: [{ required: true, message: "请输入项目说明", trigger: "blur" }],
         attention: [{ required: true, message: "请输入注意事项", trigger: "blur" }],
      },
      
    };
  },
  created() {
    this.info();
  },
};
</script>

<style scoped>
.left-align {
  display: flex;
  justify-content: flex-end;
}

.inputForm{
  width: 300px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-dialog {
  border-radius: 15px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

.el-dialog__header {
  padding: 10px 20px 10px;
  background-color: #d3dce6;
}

</style>